<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
        @on-delete="handleDelete" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
      <Button style="position:absolute; top: 27px; right: 17px;" type="primary" @click="addCommodityType">新增厂商</Button>
    </Card>
    <Modal width="900" v-model="visible" :title="title" :mask-closable="false" @on-ok="okModal" @on-cancel="cancelModal">
      <Row>
        <Col span="12">
        <Row class="row" style="margin-top:0;">
          <Col span="6">
          <strong class="title">厂商编号：</strong>
          </Col>
          <Col span="18">
          <Input v-model="number" placeholder="请输入厂商编号" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">厂商名称：</strong>
          </Col>
          <Col span="18">
          <Input v-model="name" placeholder="请输入厂商名称" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">合同编号：</strong>
          </Col>
          <Col span="18">
          <Input v-model="contractNumber" placeholder="请输入合同编号" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">税号编号：</strong>
          </Col>
          <Col span="18">
          <Input v-model="dutyNumber" placeholder="请输入税号编号" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">邮政编码：</strong>
          </Col>
          <Col span="18">
          <Input v-model="postalCode" placeholder="请输入邮政编码" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">注册地址：</strong>
          </Col>
          <Col span="18">
          <Input v-model="registeAddress" placeholder="请输入注册地址" class="form" />
          </Col>
        </Row>
        </Col>
        <Col span="12">
        <Row class="row" style="margin-top: 0;">
          <Col span="6">
          <strong class="title">联系人：</strong>
          </Col>
          <Col span="18">
          <Input v-model="contact" placeholder="请输入联系人" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">Email：</strong>
          </Col>
          <Col span="18">
          <Input v-model="email" placeholder="请输入email" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">联系电话：</strong>
          </Col>
          <Col span="18">
          <Input v-model="contactNumber" placeholder="请输入联系电话" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">营业地址：</strong>
          </Col>
          <Col span="18">
          <Input v-model="businessAddress" placeholder="请输入营业地址" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="6">
          <strong class="title">营业电话：</strong>
          </Col>
          <Col span="18">
          <Input v-model="telephoneNumber" placeholder="请输入营业电话" class="form" />
          </Col>
        </Row>
        </Col>
      </Row>
    </Modal>
    <Modal v-model="deleteVisible" @on-ok="handleDelete">
      <p>是否确定删除该条记录？</p>
    </Modal>
  </div>
</template>

<script>
import Mock from 'mockjs'
import Tables from '_c/tables'
import rcRequest from 'rc-request'

export default {
  name: 'manufacturer_management_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '编号', key: 'number' },
        { title: '厂商名称', key: 'name' },
        { title: '地址', key: 'businessAddress' },
        { title: '电话号码', key: 'contactNumber' },
        { title: '联系人', key: 'contact' },
        // { title: '传真', key: 'fax' },
        { title: 'Email', key: 'email' },
        {
          title: '操作',
          key: 'action',
          width: 140,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => {
                    this.title = '修改厂商';
                    this.visible = true;
                    this.number = params.row.number;
                    this.name = params.row.name;
                    this.contractNumber = params.row.contractNumber;
                    this.dutyNumber = params.row.dutyNumber;
                    this.postalCode = params.row.postalCode;
                    this.telephoneNumber = params.row.telephoneNumber;
                    this.contact = params.row.contact;
                    this.email = params.row.email;
                    this.contactNumber = params.row.contactNumber;
                    this.businessAddress = params.row.businessAddress;
                    this.registeAddress = params.row.registeAddress;
                    this.machineGroupIndex = params.row.initRowIndex;
                  }
                }
              }, '修改'),
              h('span', {}, ' '),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => {
                    this.deleteIndex = params.row.initRowIndex;
                    this.deleteVisible = true;
                  }
                },
              }, '删除')
            ]);
          }
        }
      ],
      tableData: [],
      // 新增/修改厂商
      title: '新增厂商',
      visible: false,
      number: '', // 厂商编号
      name: '', // 厂商名称
      contractNumber: '',  // 合同编号
      dutyNumber: '',  // 税号编号
      postalCode: '', // 邮政编码
      telephoneNumber: '', // 营业电话
      contact: '', // 联系人
      email: '',  // 电子邮箱
      contactNumber: '', // 联系电话
      businessAddress: '', // 营业地址
      registeAddress: '', // 注册地址
      machineGroupIndex: -1,
      // 删除
      deleteVisible: false,
      deleteIndex: 0,
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params)
    },

    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `厂商-${(new Date()).valueOf()}.csv`
      })
    },

    addCommodityType() {
      this.visible = true;
      this.number = '';
      this.name = '';
      this.contractNumber = '';
      this.dutyNumber = '';
      this.postalCode = '';
      this.telephoneNumber = '';
      this.contact = '';
      this.email = '';
      this.contactNumber = '';
      this.businessAddress = '';
      this.registeAddress = '';
      this.machineGroupIndex = -1;
    },

    async okModal() {
      // 新增
      if (this.machineGroupIndex < 0) {
        await rcRequest({
          method: 'post',
          url: '/manufacturer/insert_manufacturer_info',
          data: {
            manufacturer_number: this.number,
            manufacturer_name: this.name,
            contact_number: this.contactNumber,
            contact_person: this.contact,
            email: this.email,
            contract_number: this.contractNumber,
            tax_number: this.dutyNumber,
            postal_code: this.postalCode,
            business_telephone: this.telephoneNumber,
            business_address: this.businessAddress,
            registered_address: this.registeAddress,
          },
        })
        this.getListData()
        this.$Message.success('新增成功')
        return;
      }

      // 修改
      await rcRequest({
        method: 'post',
        url: '/manufacturer/update_manufacturer_info',
        data: {
          manufacturer_id: this.tableData[this.machineGroupIndex].id,
          manufacturer_number: this.number,
          manufacturer_name: this.name,
          contact_number: this.contactNumber,
          contact_person: this.contact,
          email: this.email,
          contract_number: this.contractNumber,
          tax_number: this.dutyNumber,
          postal_code: this.postalCode,
          business_telephone: this.telephoneNumber,
          business_address: this.businessAddress,
          registered_address: this.registeAddress,
        },
      })
      this.getListData()
      this.$Message.success('修改成功')
    },

    cancelModal() { },

    // 获取列表数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/manufacturer/select_manufacturer_info_list',
        data: {}
      })
      this.tableData = data.map(item => ({
        id: item.id,
        number: item.manufacturer_number,
        name: item.manufacturer_name,
        contactNumber: item.contact_number,
        contact: item.contact_person,
        fax: '',
        email: item.email,
        contractNumber: item.contract_number,
        dutyNumber: item.tax_number,
        postalCode: item.postal_code,
        telephoneNumber: item.business_telephone,
        businessAddress: item.business_address,
        registeAddress: item.registered_address,
      }))
    },

    // 删除
    async handleDelete() {
      const { data: { code, msg } } = await rcRequest({
        method: 'post',
        url: '/manufacturer/delete_manufacturer_info',
        data: {
          manufacturer_id: this.tableData[this.deleteIndex].id,
        },
      })
      if (code !== 200) {
        this.$Message.error(msg)
        return;
      }
      this.tableData.splice(this.deleteIndex, 1)
      this.$Message.success(msg)
    },
  },
  mounted() {
    this.getListData()
  }
}
</script>

<style scoped>
.row {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.form {
  width: 85%;
}
</style>
